iT邦幫忙

2021 iThome 鐵人賽

DAY 20
1
Mobile Development

雙平台APP小遊戲開發實作! Swift & Kotlin 攜手出擊~系列 第 20

[Day20] swift & kotlin 遊戲篇!(2) 小雞BB-遊戲製作-小雞排版

  • 分享至 

  • xImage
  •  

遊戲示意

swift 版本
swift 小雞BB
kotlin 版本
swift 小雞BB

swift - 改寫小雞動畫

原本畫面是這樣
swift 小雞BB

下一步我們要將其他Label與UIButton都刪除
只留下小雞動畫
並將它縮小到畫面右上角

  1. 刪除 Label + Button + ggAction 方法

  2. 將小雞移動到右上角
    遊戲 小雞BB

    屬性(小雞) 對齊 設定

    Width| 無 |80|
    Aspect Ratio(比例)| 小雞上 按住 control 拉到自己身上 |Constant:0, Multlpller:15:8|
    上| Safe Area |30|
    右| Safe Area |100|

  3. 修改動畫程式
    有個改動是, 之前為了練習
    小雞上下跳動採用 centerY 屬性
    centerY 是屬於絕對位置
    現在改成 translationY 的相對位移
    未來不管小雞放在哪個位置
    都不需要再變更設定摟

    import UIKit
    
    struct KeyFrameOptionItem {
        let startTime: Double // 動畫開始時間
        let translationX: CGFloat // 左右位移
        let translationY: CGFloat // 上下跳動
        let rotated: CGFloat // 上下角度
        let scaledX: CGFloat // 水平翻轉
    
        init(startTime: Double, translationX: CGFloat, translationY: CGFloat, rotated: CGFloat, scaledX: CGFloat)  {
            let oneDegree = CGFloat.pi / 180 // 透過pi轉換rotated角度
            self.startTime = startTime
            self.translationX = translationX
            self.rotated = rotated * oneDegree
            self.translationY = translationY
            self.scaledX = scaledX
        }
    }
    
    
    
    class ViewController: UIViewController {
        //小雞 圖片 參照
        @IBOutlet weak var ggImg: UIImageView!
        //小雞 動畫參數
        var chickKeyFrameOptions: Array<KeyFrameOptionItem> = []
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            self.setChickKeyFrameOption()
            self.setChickAnimation()
        }
    
    
        func setChickAnimation() {
            UIView.animateKeyframes(
                withDuration: 4,
                delay: 0.0,
                options: [.repeat, .calculationModeLinear],
                animations: {
                    for option in self.chickKeyFrameOptions {
                        UIView.addKeyframe(
                            withRelativeStartTime: option.startTime,
                            relativeDuration: 0.1,
                            animations: {
                                self.ggImg.transform = CGAffineTransform(translationX: option.translationX, y: option.translationY)
                                    .rotated(by: option.rotated)
                                    .scaledBy(x: option.scaledX, y: 1.0)
                            }
                        )
                    }
                },
                completion: nil
            )
        }
    
    
        fileprivate func setChickKeyFrameOption() {
            self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.0, translationX: -17.0, translationY: 0.0, rotated: 10, scaledX: 1.0))
            self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.1, translationX: -33.0, translationY:  -10.0, rotated: -10, scaledX: 1.0))
            self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.2, translationX: -50.0, translationY:  0, rotated: 10, scaledX: 1.0))
            // 以上向左邊跳到底後轉身往回走
            self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.3, translationX: -33.0, translationY:  -10.0, rotated: -10, scaledX:  -1.0))
            self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.4, translationX: -27.0, translationY: 0.0, rotated: 10, scaledX:  -1.0))
            self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.5, translationX: 0.0,  translationY: -10.0, rotated: -10, scaledX: -1.0))
            self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.6, translationX: 30.0, translationY:  0.0, rotated: 10, scaledX:  -1.0))
            self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.7, translationX: 50.0, translationY:  -10.0, rotated: -10, scaledX: -1.0))
            //跳到最右邊後 轉身往原點走
            self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.8, translationX: 20.0, translationY:  0.0, rotated: 10, scaledX:  1.0))
            self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.9, translationX: 0.0, translationY:  -10.0, rotated: -10, scaledX: 1.0))
        }
    
    }
    
  4. 背景小雞修改完成
    遊戲 小雞BB

kotlin - 改寫小雞動畫

原本畫面是這樣
kotlin 小雞BB

kotlin這邊相對比較簡單

  1. 刪除 textView + Button + ggAction 方法

  2. 將小雞移動到右上角

    屬性(小雞) 對齊 設定

    layout_width| 無 |40dp|
    layout_height| 無 |40dp|
    End -> EndOf| parent |50dp|
    Top -> TopOf| parent |15dp|

  3. 背景小雞修改完成
    遊戲 小雞BB

差異

到目前 不管是比較排版 或者動畫綁定
兩邊寫法都沒有太大差別

寫起來的感覺是 只要一邊想到辦法
另一邊就可以用同樣的思考方法做出來

小碎嘴時間 ヽ(゚´Д`)ノ゚

第20天了~(= ̄ω ̄=)
寫到現在認真覺得~鐵人賽不簡單啊~

難得是~要一邊學習
一邊將學到的東西記錄下來

好難啊~
有時候研究了兩三個小時 然後~
發現研究方向是錯的!! 歸零!!!
<(  ̄︿ ̄)︵θ︵θ︵θ︵θ︵☆(>口<-) 流星拳攻擊

真難啊~~~


上一篇
[Day19] swift & kotlin 遊戲篇!(1) 小雞BB-遊戲製作-按鈕排版
下一篇
[Day21] swift & kotlin 遊戲篇!(3) 小雞BB-遊戲製作-分數與提示排版
系列文
雙平台APP小遊戲開發實作! Swift & Kotlin 攜手出擊~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言